<template>
  <div class="grey_bg">
    <navigate>取消预约申请</navigate>
    <div class="main_content">
      <div class="label_text">填写申请理由</div>
      <textarea name id v-model="reason"></textarea>
      <button class="btn submit_btn" @click="submit">提交申请</button>
      <div class="tip_text">
        注：恶意取消预约，咨询师有权将您移入黑名单，并禁用您的预约功能。
        请如实填写申请取消的原因。
      </div>
    </div>
  </div>
</template>

<script>
import { cancelOffReservation } from "@/api/consultation/record";
export default {
  data() {
    return {
      reason: "",
    };
  },
  methods: {
    // 提交理由
    async submit() {
      if (!this.reason) return this.$toast.fail("请填写申请理由！");
      const parasm = {
        id: this.$route.query.id,
        cancel_reason: this.reason,
      };
      let res = await cancelOffReservation(parasm);
      if (res.code == 200) {
        this.$toast.success("取消预约成功！");
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style scoped>
.grey_bg {
  background: #f4f6fa;
  overflow-y: hidden !important;
}

.main_content {
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 10.42px;
  box-sizing: border-box;
  align-content: flex-start;
  padding: 0 10.42px 16.67px 10.42px;
  box-sizing: border-box;
}

.label_text {
  font-size: 14.58px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #333333;
  height: 47.23px;
  line-height: 47.23px;
  padding-top: 1.39px;
}

.submit_btn {
  width: 347.22px;
  height: 48.61px;
  border-radius: 6.94px;
  font-size: 17.36px;
  margin: 0 auto;
}

.tip_text {
  width: calc(100% - 21.18px);
  font-size: 13.89px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: justify;
  color: #888888;
  line-height: 29.17px;
  margin: 22.57px auto 0;
}

textarea {
  width: 354.17px;
  height: 208.33px;
  background: #ffffff;
  border-radius: 6.94px;
  outline: none;
  padding: 8.68px 14.24px;
  box-sizing: border-box;
  border: none;
  margin-bottom: 34.72px;
  font-size: 15.97px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #333333;
  line-height: 29.17px;
  word-break: break-all;
}
</style>
